<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <base th:href="@{/}">
    <title>尚硅谷会员登录页面</title>
    <link type="text/css" rel="stylesheet" href="static/css/style.css"/>
</head>
<body>
<div id="app">
    <div id="login_header">
        <a href="index.html">
            <img class="logo_img" alt="" src="static/img/logo.gif"/>
        </a>
    </div>

    <div class="login_banner">
        <div id="l_content">
            <span class="login_word">欢迎登录</span>
        </div>

        <div id="content">
            <div class="login_form">
                <div class="login_box">
                    <div class="tit">
                        <h1>尚硅谷会员</h1>
                    </div>
                    <div class="msg_cont">
                        <b></b>
                        <span class="errorMsg" v-text="errorMsg">请输入用户名和密码</span>
                    </div>
                    <div class="form">
                        <form th:action="@{/user}" @submit.prevent="mySubmit()">
                            <label>用户名称：</label>
                            <input type="hidden" name="method" value="login">
                            <input
                                    class="itxt"
                                    type="text"
                                    placeholder="请输入用户名"
                                    autocomplete="off"
                                    tabindex="1"
                                    name="username"
                                    id="username"
                                    @change="userNameCheck()"
                                    v-model="userNameMsg"
                            />
                            <br/>
                            <br/>
                            <label>用户密码：</label>
                            <input
                                    class="itxt"
                                    type="password"
                                    placeholder="请输入密码"
                                    autocomplete="off"
                                    tabindex="1"
                                    name="password"
                                    id="password"
                                    @change="passWordCheck()"
                                    v-model="passWordMsg"
                            />
                            <br/>
                            <br/>
                            <input type="submit" value="登录" id="sub_btn"/>
                        </form>
                        <div class="tit">
                            <a th:href="@{/user(method=toRegistPage)}">立即注册</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
</div>

</body>
<script src="static/script/vue.js"></script>
<script src="static/script/axios.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            errorMsg:"",
            userNameMsg:"",
            passWordMsg:""
        },
        methods: {
            checkReg(data,msg){
                var reg = /^\s*$/;
                if(reg.test(data)){
                    this.errorMsg = msg;
                    return true;
                }else {
                    this.errorMsg = "";
                    return false;
                }

            },
            userNameCheck(){
                var flag = this.checkReg(this.userNameMsg,"账号不能为空");
                if(flag){
                    return false;
                }else {
                    return true;
                }
            },
            passWordCheck(){
                var flag = this.checkReg(this.passWordMsg,"密码不能为空");
                if(flag){
                    return false;
                }else {
                    return true;
                }
            },
            mySubmit(){
                var _this = this;
                if(!this.userNameCheck()||!this.passWordCheck()){
                    event.preventDefault();
                    return;
                }
                //可以登录
                axios({
                    method:"get",
                    url:"/bookstore/user",
                    params:{
                        method:"login",
                        username:_this.userNameMsg,
                        password:_this.passWordMsg
                    }
                }).then(function (res) {
                    var data = res.data;
                    if(data.flag){
                        //登录成功  data.data 是js对象,转换为json字符串
                        sessionStorage.setItem("existUser",JSON.stringify(data.data));
                        location.href="/bookstore/user?method=toLoginSuccessPage";
                    }else {
                        //登录失败,密码或账号错误
                        _this.errorMsg = data.msg;
                    }
                }).catch(function (res) {

                })
            }
        }
    });
</script>
</html>
